import React from 'react'
import classnames from 'classnames'
import {NavLink} from 'react-router-dom'
import './battleItem.less'

const BattleItem = props => {
  const {roomNo, createTime, totalSettleVo, gameNo, gameType, _appendInfo = {ruleName: ''}} = props.data
  const roomNumbers = roomNo.split('')
  const toLink = `/RoundReply/${gameNo}/${gameType}`
  console.error('_appendInfo', _appendInfo)
  return <div  className="battle-item">
  <NavLink to={toLink}>
    <div className="battle-content-top pure-g">
      <div className="pure-u-15-24 middle-img">
        <img className="roomNo mlr-2" src="img/battle/roomNo-text.png?v=20181201" alt="" />
        {
          roomNumbers.map((number, index) => {
            const src = `img/battle/${number}.png?v=20181201`
            return <img key={index} className="roomNumber" src={src} alt="" />
          })
        }
      </div>
      <div className="pure-u-9-24 text-right">
        <span className="mrr-2">{util.timeUtil.getDateTime(createTime)}</span>
      </div>
    </div>
    <div className="battle-content-middle pure-g">
      {
        totalSettleVo.map((settle, index) => {
          const pointCn = classnames({'record-orange': settle.point >= 0, 'record-green': settle.point < 0, 'mrr-3': true})
          return <div className="pure-u-1-3 box" key={index}>
            <div className="point-show">
              <span className="mlr-3">{util.maxLength(settle.nickName, 4)}</span>
              <span className={pointCn}>{settle.point > 0 ? '+' + settle.point: settle.point}</span>
            </div>
          </div>
        })
      }
    </div>
    <div className="battle-content-bottom">
      <span className="mlr-2">{_appendInfo.ruleName}</span>
      <div>
        <div className="pull-right white-text">
          <span className="mrr-2 see-detail">点击查看详情</span>
        </div>
      </div>
    </div>
  </NavLink>
  </div>
}
export default BattleItem